import React from 'react';
import { DemoBlock } from 'demos';
import { Grid } from '@pxxtech/component';

const styles: any = {
  'grid-demo-item-block': {
    border: 'solid 1px #999999',
    background: '#f5f5f5',
    textAlign: 'center',
    color: '#999999',
    height: '100%',
  },
};

export default () => {
  return (
    <>
      <DemoBlock title="基础用法">
        <Grid columns={3} gap={8}>
          <Grid.Item>
            <div style={styles['grid-demo-item-block']}>A</div>
          </Grid.Item>
          <Grid.Item>
            <div style={styles['grid-demo-item-block']}>B</div>
          </Grid.Item>
          <Grid.Item>
            <div style={styles['grid-demo-item-block']}>C</div>
          </Grid.Item>
          <Grid.Item>
            <div style={styles['grid-demo-item-block']}>D</div>
          </Grid.Item>
          <Grid.Item>
            <div style={styles['grid-demo-item-block']}>E</div>
          </Grid.Item>
        </Grid>
      </DemoBlock>

      <DemoBlock title="控制格子的跨度">
        <Grid columns={3} gap={8}>
          <Grid.Item>
            <div style={styles['grid-demo-item-block']}>A</div>
          </Grid.Item>
          <Grid.Item span={2}>
            <div style={styles['grid-demo-item-block']}>B</div>
          </Grid.Item>
          <Grid.Item span={2}>
            <div style={styles['grid-demo-item-block']}>C</div>
          </Grid.Item>
          <Grid.Item>
            <div style={styles['grid-demo-item-block']}>D</div>
          </Grid.Item>
          <Grid.Item span={3}>
            <div style={styles['grid-demo-item-block']}>E</div>
          </Grid.Item>
        </Grid>
      </DemoBlock>
    </>
  );
};
